<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="referrer" content="never"> 
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../../css/utils/mui.min.css" />
	<title></title>
	<style>
		body {
			padding: 0;
			margin: 0;
			font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 14px;
		}
		.mui-table-view {
			background-color: #efeff4;
		}
		.mui-table-view-cell {
			background-color: #fff;
			margin-top: 6px;
		}
		.space-between {
			display: flex;
			display: -webkit-flex;
			justify-content: space-between;
		}
		.goods-info {
			min-height: 80px;
		    background-color: #efeff4;
		}
		.mui-table-view .mui-media-object {
			line-height: 60px;
		    max-width: 60px;
		    height: 60px;
		}
		.goods-info {
			padding: 10px;
		}
		.goods-name {
			width: calc(100% - 80px);
		}
		.goods-price {
			text-align: right;
			width: 80px;
			color: #E46918;
		}
		.standard-name {
			color: #807F7F;
			font-size: 12px;
		}
		.pay-number {
			color: #807F7F;
			font-size: 12px;
		}
		.order-type {
			color: red;
		}
		.price-span {
			font-size: 14px;
			color: #E46918;
		}
		.total-price {
			font-size: 12px;
			margin-bottom: 6px;
		}
		.line-div {
			width: 100%;
			margin: 10px 0;
		    height: 1px;
		    background-color: #F3F3F3;
		}
		.order-btn {
			text-align: right;
			margin-top: 10px;
		}
		.order-btn .mui-btn {
			border-radius: 18px;
		}
		.empty_list {
			display: none;
		    font-size: 15px;
		    line-height: 40px;
		    color: #777;
			margin-top: 20px;
			text-align: center;
		}
		.mui-content>.mui-table-view:first-child {
			margin-top: -1px;
		}
		.mui-bar-nav~.mui-content .mui-pull-top-pocket {
			top: 0;
		}
		.mui-scroll-wrapper {
			/*top: 40px;*/
			bottom: 51px;
		}
		.link-div {
			display: none;
		}
		.order-id-hide {
			display: none;
		}
		
		.mui-bar-tab .mui-tab-item.mui-active {
			color: #FA1F35;
		}
		.mui-bar-tab .mui-tab-item {
			color: #BCBCBC;
		}
		.goods-tab {
			background: url(../../img/phone/mall-no.png) no-repeat;
			background-size: 100% 100%;
		}
		.mui-tab-item.mui-active .goods-tab {
			background: url(../../img/phone/mall-active.png) no-repeat;
			background-size: 100% 100%;
		}
		.order-tab {
			background: url(../../img/phone/mall-order.png) no-repeat;
			background-size: 100% 100%;
		}
		.mui-tab-item.mui-active .order-tab {
			background: url(../../img/phone/mall-order-active.png) no-repeat;
			background-size: 100% 100%;
		}
		.income-tab {
			background: url(../../img/phone/mall-income.png) no-repeat;
			background-size: 100% 100%;
		}
		.mui-tab-item.mui-active .income-tab {
			background: url(../../img/phone/mall-income-active.png) no-repeat;
			background-size: 100% 100%;
		}
	</style>
</head>
<body>
	<!--<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">订单管理</h1>
	</header>-->
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item" id="toGoodsList" href="#">
			<span class="mui-icon goods-tab"></span>
			<span class="mui-tab-label">商品</span>
		</a>
		<a class="mui-tab-item mui-active" href="#">
			<span class="mui-icon order-tab"></span>
			<span class="mui-tab-label">订单</span>
		</a>
		<a class="mui-tab-item" id="toIncome" href="#">
			<span class="mui-icon income-tab"></span>
			<span class="mui-tab-label">收益</span>
		</a>
	</nav>
	<div class="mui-content">
		<div class="empty_list">暂无订单，赶快去下单吧！</div>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view"></ul>
			</div>
		</div>
	</div>
	<div id="delOrderPanel" class="mui-popup-backdrop mui-active" style="display: none;">
		<div class="mui-popup mui-popup-in">
			<div class="link-div"></div>
			<span class="order-id-hide"></span>
			<div class="mui-popup-inner">
				<div class="mui-popup-text">确定要删除订单吗！</div>
			</div>
			<div class="mui-popup-buttons">
				<span id="cancle" class="mui-popup-button mui-popup-button-bold">取消</span>
				<span id="confirm" class="mui-popup-button mui-popup-button-bold">确定</span>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
	<script type="text/javascript" src="../../js/utils/mui.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/spin.min.js"></script>
	<script type="text/javascript">
		document.write('<script type="text/javascript" src="../../js/utils/boot.js?v='+new Date().getTime()+'" ><\/script>');
	</script>
	<script>
		var customerID = base.getParameter("customerID");
		var companyID = base.getParameter("companyID");
		var totalPage = 1,page=0;
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					style:'circle',
					callback: pulldownRefresh
				},
				up: {
					auto:true,
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		$(function(){
			initWX();
		});
		function initWX() {
			if (companyID == null || companyID == "") {
				companyID = 0;
			}
			//初始化微信
			base.initWX(companyID);
		}
		function initOrderList(){
			base.postData(base.url.wxGetGoodsOrderSpecList, {customerID:customerID,pageNo:page}, function(data){
				if (data.success) {
					if (data.context.orderList.length == 0 && page == 1) {
						$(".empty_list").show();
						$("#pullrefresh").hide();
					}else{
						totalPage = Math.ceil(data.context.totalPage/10);
						var li = "";
						for (var index in data.context.orderList) {
							li += pinOrderList(data.context.orderList[index]);
						}
						if (page == 1) {
							$(".mui-table-view").html(li);
						}else{
							$(".mui-table-view").append(li);
						}
					}
				}
			});
		}
		function pinOrderList(data){
			var payStatus = "";
			if (data.payStatus == 0) {
				payStatus = "等待买家付款";
			}else {
				if (data.isDeliver == 1) {
					payStatus = "已发货，物流号："+data.logisticsNumber;
				}else{
					payStatus = "等待卖家发货";
				}
			}
			var html = '<li class="mui-table-view-cell mui-media">'+
						'   <input type="hidden" name="orderNo" value="'+data.orderNo+'" />'+
						'   <input type="hidden" name="orderId" value="'+data.orderId+'" />'+
						'	<div class="total-price space-between">'+
						'		<div class="order-type">'+payStatus+'</div>'+
						'		<div>合计：<span class="price-span">¥'+data.goodsPrice+'</span></div>'+
						'	</div>'+
						'	<div class="goods-info">'+
						'		<img id="goodsImg" class="mui-media-object mui-pull-left" src="'+data.previewImg+'">'+
						'		<div class="mui-media-body">'+
						'			<div class="space-between">'+
						'				<div class="goods-name mui-ellipsis-2">'+data.goodsName+'</div>'+
						'				<div class="goods-price">¥'+data.specPrice+'</div>'+
						'			</div>'+
						'			<div class="space-between">'+
						'				<div class="standard-name">'+data.specName+'</div>'+
						'				<div class="pay-number">X '+data.purchaseNum+'</div>'+
						'			</div>'+
						'		</div>'+
						'	</div>'+
						'	<div class="order-btn">';
						if (data.payStatus == 0) {
				html +=	'		<button type="button" class="mui-btn del-order">删除订单</button>'+
						'		<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined pay-order">付款</button>';
						}
				html += '	</div>';
						'</li>';
			return html;			
		}
		
		function pullupRefresh() {
			setTimeout(function() {
				mui('#pullrefresh').pullRefresh().endPullupToRefresh((page >= totalPage)); //参数为true代表没有更多数据了。
				page ++;
				initOrderList();
			}, 1500);
		}
		
		function pulldownRefresh() {
			setTimeout(function() {
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				mui('#pullrefresh').pullRefresh().refresh(true);
				page = 1;
				initOrderList();
			}, 1500);
		}
		//删除订单
		$(".mui-table-view").on('tap', '.del-order', function(){
			var orderID = $(this).closest("li").find("input[name='orderId']").val();
			$(".order-id-hide").text(orderID);
			$("#delOrderPanel").show();
		});
		//支付订单
		$(".mui-table-view").on('tap', '.pay-order', function(){
			var orderNo = $(this).closest("li").find("input[name='orderNo']").val();
			if (window.__wxjs_environment === 'miniprogram'){   
				var params = '?customerID='+customerID+'&companyID='+companyID+'&orderNo='+orderNo; 
				//定义path 与小程序的支付页面的路径相对应  
				var path = '/pages/wxpay/wxpay'+params;  
				//通过JSSDK的api使小程序跳转到指定的小程序页面  
				wx.miniProgram.navigateTo({url: path});      
			} else {
				base.weChatPay({orderNo:orderNo,customerId:customerID}, function(rse) {
					mui.toast("支付成功");
	                setTimeout(function(){
	                   	page = 1;
						initOrderList();
	                }, 1000);
				});
			}
		});
		$("#delOrderPanel").on('tap', '#confirm', function(){
			var orderID = $(".order-id-hide").text();
			base.postData(base.url.delGoodsOrder, {orderID:orderID}, function(data){
				if (data.success) {
					$("#delOrderPanel").hide();
					mui.toast("删除成功");
					page = 1;
					initOrderList();
				}else{
					mui.toast(data.msg);
				}
			});
		});
		$("#delOrderPanel").on('tap', '#cancle', function(){
			$("#delOrderPanel").hide();
		});
		$("#toGoodsList").on('tap', function(){
			window.location.href=server_root+'/admin_mw/pages/phone/shoppingMall.html?customerID='+customerID;
		});
		$("#toIncome").on('tap', function(){
			window.location.href=server_root+'/admin_mw/pages/phone/personalIncome.html?customerID='+customerID;
		});
	</script>
</body>
</html>
